import { useState, useEffect, useRef } from 'react';
import { SafeAreaView, Dimensions, FlatList, StyleSheet, TouchableOpacity, Text, Button, View, Image, ImageBackground, ScrollView, TextInput } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import { Ionicons } from '@expo/vector-icons';
import { ActionSheet } from 'antd-mobile-rn';
import { Camera } from "expo-camera";
import { AntDesign } from '@expo/vector-icons';
import axios from '../../api/axios';
import {useAuth} from '../../context/AuthProvider'

const Btn = ({ children, style, color, ...rest }) => {
    return (
        <TouchableOpacity {...rest} style={
            {
                justifyContent: 'center',
                alignItems: 'center',
                ...style
            }
        }>
            <Text style={{ color: color ? color : '#fff' }}>{children}</Text>
        </TouchableOpacity>
    )
}
const AddNews = ({ navigation }) => {
    const [topics, setTopics] = useState([]);
    const [content, setContent] = useState("");
    const [newsTopic, setNewsTopic] = useState("");
    const [imgView, setImgView] = useState(false);
    const { width, height } = Dimensions.get('window');
    
    const getImg = () => {
        setImgView(!imgView)
    }
    // 点击参与话题
    const addTopic = (e) => {
        setNewsTopic(e);
        // console.log(e);
    }
    const addNews = ()=>{
        axios.post('/news/addnews',{
            userid:''
        })
    }
    useEffect(() => {
        navigation.setOptions({
            headerBackVisible: false,
            headerRight: () => (
                <Btn
                    style={{
                        width: 69,
                        height: 32,
                        backgroundColor: '#42C05C',
                        borderRadius: 4
                    }}
                    color={'#fff'}
                    onPress={addNews}
                >
                    <Text style={{ fontSize: 16 }}>发布</Text>
                </Btn>
            )
        });
        axios.get('/news/moretopics')
            .then(res => {
                // console.log(res.data);
                if (res.code == 200) {
                    setTopics(res.data);
                    // console.log(123);
                }
            })
    }, []);
    return (
        <View style={{ height: height - 56, justifyContent: 'space-between' }}>
            <View onStartShouldSetResponder={() => setImgView(false)}>
                {/* 导航栏 */}
                <View style={{
                    backgroundColor: '#fff',
                    flexDirection: 'row',
                    height: 61,
                    alignItems: 'center',
                    borderColor: '#BBBBBB',
                    borderBottomWidth: 1.5,
                }}>
                    <Ionicons name="logo-firebase" size={26} color="#F98905" style={styles.icon} />
                    <View style={{ flexDirection: 'row', width: '88%' }}>
                        <FlatList
                            data={topics}
                            renderItem={({ item }) => {
                                return (
                                    <View style={{ flexDirection: 'row' }} key={item.cropsid}>
                                        <Btn
                                            style={styles.topBtn}
                                            color={"#859C48"}
                                            onPress={() => addTopic(item)}
                                        >
                                            {item.cropname}
                                        </Btn>
                                    </View>)
                            }}
                            horizontal={true}
                            showsHorizontalScrollIndicator={false}
                        />
                    </View>
                </View>
                {/* 文本框 */}
                <View style={{ justifyContent: 'flex-start', alignItems: 'center' }}>
                    <TextInput
                        style={newsTopic ? {
                            width: '100%',
                            height: 30,
                            lineHeight: 25,
                            color: '#057748',
                            paddingLeft: 18,
                            fontSize: 16,
                        } : { display: 'none' }}
                        value={'#' + newsTopic.cropname}
                        onChangeText={text => setNewsTopic(text)}
                    />
                    <TextInput
                        style={styles.input}
                        multiline={true}
                        placeholder="来聊聊吧……"
                        value={content}
                        onChangeText={text => setContent(text)}
                    />
                </View>
            </View>
            {/* 底框 */}
            <View style={[styles.btm, { minHeight: 120, }]}>
                <View
                    onStartShouldSetResponder={() => setImgView(false)}
                    style={{
                        height: 60, borderBottomColor: '#ddd',
                        borderBottomWidth: 1.5,
                        justifyContent: 'center',
                        alignItems: 'flex-start'
                    }}>
                    <View style={{
                        backgroundColor: '#DEFBCE',
                        height: 35,
                        justifyContent: 'center',
                        width: 250,
                        marginLeft: 20,
                        borderRadius: 20,
                        alignItems: 'center'
                    }}>
                        <Text style={{ color: '#42C05C' }}># 参与话题可以增加内容曝光率</Text>
                    </View>
                </View>
                <View style={{ paddingTop: 10 }}>
                    <AntDesign name="picture" size={38} color="black" onPress={getImg} style={{ left: 20 }} />
                    <View style={imgView ? { height: 105, alignItems: 'center' } : { display: 'none' }}>
                        {/* <AntDesign name="camera" size={24} color="black" /> */}
                        {/* <Image
                            style={{ width: 100, height: 100, marginLeft: 10 }}
                            source={require('../../../images/news/noImg.png')} />
                        <Image
                            style={{ width: 100, height: 100, marginLeft: 10 }}
                            source={require('../../../images/news/noImg.png')} />
                        <Image
                            style={{ width: 100, height: 100, marginLeft: 10 }}
                            source={require('../../../images/news/noImg.png')} /> */}
                        <Btn
                            style={{
                                width: '100%',
                                height: '50%',
                                borderWidth: 1,
                                borderColor: '#bbb'
                            }}
                            color={'#000'}
                        >
                            <Text style={{ fontSize: 16 }}>拍照</Text>
                        </Btn>
                        <Btn
                            style={{
                                width: '100%',
                                height: '50%',
                                borderWidth: 1,
                                borderTopWidth: 0,
                                borderColor: '#bbb'
                            }}
                            color={'#000'}
                        >
                            <Text style={{ fontSize: 16 }}>从相册中选择</Text>
                        </Btn>
                    </View>
                </View>
            </View>
        </View>
    )
}
const styles = StyleSheet.create({
    topBtn: {
        borderWidth: 1,
        borderColor: "#BEC338",
        minWidth: 65,
        height: 32,
        borderRadius: 4,
        marginRight: 2,
        marginLeft: 6,
    },
    icon: {
        width: '12%',
        left: 13
    },
    input: {
        width: '90%',
        minHeight: 40,
        maxHeight: 400,
        color: '#2A5F69',
        // paddingLeft: 26,
        marginTop: 4,
        fontSize: 20,
    },
    btm: {
        width: '100%',
        backgroundColor: '#fff',
    }
});
export default AddNews
